<template>
  <div class="vipAudit">
    <!-- <van-nav-bar title left-arrow @click-left="backHome" /> -->
    <nav-bar></nav-bar>
    <div class="content">
      <div class="title-box">
        <div class="icon-box">
          <img v-show="vip.status == 0" src="@/assets/img/dengdai.png" alt />
          <img v-show="vip.status == 1" src="@/assets/img/tongguo.png" alt />
          <img v-show="vip.status == 2" src="@/assets/img/weitongguo.png" alt />
          <!-- <van-icon v-show="vip.status == 1" name="checked" size="1.2rem" color="#68BF7B" />
          <van-icon v-show="vip.status == 2" name="clear" size="1.2rem" color="#CC0404" />
          <van-icon v-show="vip.status == 0" name="info" size="1.2rem" color="#E6A23C" />-->
        </div>
        <div class="vipStatus">{{vipStatus}}</div>
      </div>
      <div class="text-box">
        <div class="text">
          <span v-show="vip.status == 0">您的资料已提交，请耐心等待审核</span>
          <span v-show="vip.status == 1">审核已通过，请尽快完成缴费！</span>
          <div v-show="vip.status == 1" style="color:#000;margin-top:10px;">
            缴费金额：
            <span>{{vip.price}}</span>
          </div>
          <span v-show="vip.status == 2">审核未通过，修改资料后继续提交！</span>
        </div>
      </div>
    </div>
    <div class="botton-box">
      <span v-show="vip.status == 0" @click="backHome()">确定</span>
      <span v-show="vip.status == 1" @click="payVip()">立即缴费</span>
      <span v-show="vip.status == 2" @click="update()">修改资料</span>
    </div>
    <!-- <div class="applyButton" @click="applyVip()">同意并申请入会</div> -->
    <div class="fuli-box-cm">
      <fuli></fuli>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import navBar from '@/components/NavBar'
import fuli from '@/components/fuli'
import wxPay from 'weixin-jsapi'
export default {
  components: {
    navBar,
    fuli,
  },
  name: 'vipAudit',
  computed: {
    ...mapGetters(['userInfo']),
  },
  data() {
    return {
      imgUrl: config.imgUrl,
      param: {
        page: 1,
        pageSize: 10,
      },
      vip: {},
      vipStatus: '',
      isFindLog: false,
    }
  },
  methods: {
    backHome() {
      this.$router.back()
    },
    payVip() {
      console.log('立即缴费!')
      if (this.$sessionStorage.get('openId')) {
        this.JSPay()
      } else {
        this.H5Pay()
      }
    },
    JSPay() {
      this.$request
        .post('/vip/vipPay', { vipId: this.vip.vipId, flag: 2 })
        .then((rsp) => {
          if (rsp.code === 200) {
            wxPay.config({
              debug: false, // 这里一般在测试阶段先用ture，等打包给后台的时候就改回false,
              appId: rsp.data.paramMap.appId, // 必填，公众号的唯一标识
              timestamp: rsp.data.paramMap.timeStamp, // 必填，生成签名的时间戳
              nonceStr: rsp.data.paramMap.nonceStr, // 必填，生成签名的随机串
              signature: rsp.data.paramMap.paySign, // 必填，签名
              jsApiList: ['chooseWXPay'], // 必填，需要使用的JS接口列表
            })
            const _this = this
            wxPay.ready(() => {
              wxPay.checkJsApi({
                jsApiList: ['chooseWXPay'],
                success: function (res) {
                  console.log('seccess')
                  console.log('hskdjskjk', res)
                },
                fail: function (res) {
                  console.log('fail')
                  console.log(res)
                },
              })
              wxPay.chooseWXPay({
                timestamp: rsp.data.paramMap.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                nonceStr: rsp.data.paramMap.nonceStr, // 支付签名随机串，不长于 32 位
                package: rsp.data.paramMap.packageStr, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
                signType: rsp.data.paramMap.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                paySign: rsp.data.paramMap.paySign, // 支付签名
                success: function (res) {
                  // 支付成功后的回调函数
                  _this.isFindLog = true
                  _this.findPayLog(rsp.data.payId)
                  _this.$toast.success('支付成功!')
                },
                fail: function (res) {
                  _this.$toast.fail('支付失败')
                },
              })
            })
          } else {
            this.$toast.fail(rsp.content)
          }
        })
    },
    H5Pay() {
      this.$request
        .post('/vip/vipPay', { vipId: this.vip.vipId, flag: 1 })
        .then((rsp) => {
          if (rsp.code === 200) {
            this.findPayLog(rsp.data.payId)
            window.location.href = rsp.data.mwebUrl
          } else {
            this.$toast.fail(rsp.content)
          }
        })
    },
    nextPage() {
      this.$router.replace({ path: '/vipAuthentication' })
    },
    findPayLog(logId) {
      if (logId && this.isFindLog) {
        this.$request
          .post('/activity/payResult', { payId: logId })
          .then((rsp) => {
            if (rsp.code === 200) {
              this.isFindLog = false
              this.nextPage()
            } else {
              setTimeout(() => {
                this.findPayLog(logId)
              }, 2000)
            }
          })
      }
    },
    update() {
      this.$router.push({
        path: '/updateApplyVip',
        query: {
          declareId: this.vip.declareId,
          pageUrl: this.vip.pageUrl,
        },
      })
    },
    findVip() {
      this.param.userCode = this.userInfo.userCode
      this.$request.post('/vip/selectMyVip', this.param).then((rsp) => {
        if (rsp.code === 200) {
          this.vip = rsp.data.list[0]
          this.vipStatus = this.statusForatter(this.vip.status)
        } else {
          this.$toast.fail(rsp.content)
        }
      })
    },
    statusForatter(cellValue) {
      let status = ''
      if (cellValue == '0') {
        status = '待审核'
      } else if (cellValue == '1') {
        status = '已通过'
      } else if (cellValue == '2') {
        status = '未通过'
      }
      return status
    },
  },
  mounted() {
    this.findVip()
  },
}
</script>
<style lang='scss'>
@import '../assets/css/base';
.fuli-box-cm {
  padding: 0 px2rem(30);
  box-sizing: border-box;
  margin-top: 60px;
}
.vipAudit {
  .content {
    background-size: 100% 100%;
    background-color: #fff;
    height: px2rem(500);
    position: relative;
    .title-box {
      position: absolute;
      left: 0;
      right: 0;
      top: px2rem(70);
      .vipStatus {
        color: #333;
        font-size: px2rem(56);
        text-align: center;
        font-weight: 600;
        margin-top: px2rem(40);
        letter-spacing: px2rem(2);
      }
      .icon-box {
        text-align: center;
        img {
          width: px2rem(130);
          height: px2rem(130);
        }
      }
    }
    .text-box {
      background-size: 100% 100%;
      position: absolute;
      left: 0;
      top: px2rem(80);
      .text {
        text-align: center;
        color: #a0a0a0;
        margin-top: px2rem(260);
        font-size: px2rem(40);
        padding: 0 px2rem(80);
        line-height: px2rem(60);
      }
    }
  }
  .botton-box {
    margin-top: px2rem(80);
    text-align: center;
    & > span {
      font-size: px2rem(36);
      background-color: $mainColor;
      padding: px2rem(20) px2rem(180);
      border-radius: px2rem(10);
      color: #fff;
    }
  }
  .applyButton {
    color: #fff;
    background: $mainColor;
    position: fixed;
    bottom: 0;
    height: px2rem(100);
    text-align: center;
    width: 100%;
    line-height: px2rem(100);
    font-size: px2rem(36);
  }
}
</style>
